<template>
  <!-- 分计划详情页 -->
  <div class="container">
    <div class="container-top">
      <div class="back" @click="goBack"></div>
    </div>
    <div class="head borderStyle centerbox relative">
      <div class="echa">
        <v-chart :auto-resize="true" :options="newOption" @click="clickEvent" />
      </div>
    </div>
    <div class="center">
      <div class="inspection-report-h bigTableStyle">
        <div class="inspection-report-index">
          <div class="fromed">
            <el-form ref="elForm" :model="formData" :rules="rules" label-width="1.4rem">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="所属单位:" prop="time">
                        <el-select
                          v-model="formData.company"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="(item, index) in CompanyList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="变电站:" prop="source">
                        <el-select
                          v-model="formData.substation"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="(item, index) in SubstationList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="巡检类型:" prop="area">
                        <el-select
                          v-model="formData.xslx"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                        >
                          <el-option
                            v-for="(item, index) in xjlxList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="巡检方式:" prop="unit">
                        <el-select
                          v-model="formData.xsfs"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in xjfsList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="计划状态:" prop="identify">
                        <el-select
                          v-model="formData.zxqk"
                          placeholder="请选择"
                          :style="{width: '100%'}"
                          clearable
                        >
                          <el-option
                            v-for="(item, index) in jhztList"
                            :key="index"
                            :label="item.name"
                            :value="item.code"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="巡检开始时间:" prop="source">
                        <el-date-picker
                          :style="{width: '100%'}"
                          v-model="formData.xjtime"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="6">
                  <div class="inspection-report-index-btn">
                    <el-button
                      class="table-query"
                      type="primary"
                      @click="submitForm"
                      icon="el-icon-search"
                    >查询</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="tableed">
            <el-table
            border
              :data="newTableData"
              height="100%"
              :row-class-name="tableRowClassName"
              style="width: 100%;height:100%;"
              v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
            >
              <el-table-column prop="myIndex" label="序号" show-overflow-tooltip width="70"></el-table-column>
              <el-table-column prop="SSDSMC" label="所属单位" show-overflow-tooltip></el-table-column>
              <el-table-column prop="BDZMC" label="变电站名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="RWMC" label="任务名称"  width="280" show-overflow-tooltip></el-table-column>
              <el-table-column prop="XSLXMC" label="巡检类型"  width="120" show-overflow-tooltip></el-table-column>
              <el-table-column prop="XSFSMC" label="巡检方式"  width="120" show-overflow-tooltip></el-table-column>
              <el-table-column prop="JHKSSJ" label="计划开始时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="XSKSSJ" label="巡检开始时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="XSJSSJ" label="巡检结束时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="ZXQKMC" label="计划状态"  width="120" show-overflow-tooltip></el-table-column>
              <el-table-column prop="ZXQKMC" label="跟踪" width="80" :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                  <div
                    class="iconfont icongenzong"
                    v-if="scope.row.ZXQKMC=='执行中'"
                    @click="handleEdit(scope,'跟踪')"
                    style="cursor: pointer;"
                  ></div>
                  <!-- <div
                    class="iconfont icongenzong"
                    @click="handleEdit(scope,'跟踪')"
                    style="cursor: pointer;"
                  ></div>-->
                </template>
              </el-table-column>
              <el-table-column prop label="信息总览"  width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <i
                    class="el-icon-s-order iconfonts"
                    v-if="scope.row.ZXQKMC=='已执行'"
                    @click="handleEdit(scope,'信息总览','fjh')"
                    style="cursor: pointer;"
                  ></i>
                </template>
              </el-table-column>
              <el-table-column prop label="报告"  width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div
                    class="iconfont iconbaogao"
                    v-if="scope.row.ZXQKMC=='已执行'"
                    @click="handleEdit(scope,'报告','fjh')"
                    style="cursor: pointer;"
                  ></div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paged elPaginationStyle">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-sizes="[10, 20, 30]"
              :page-size="pages.pageSize"
              layout="total,prev, pager, next,sizes, jumper"
              :total="pages.totalSize"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="Manipulation.BDZMC+'巡视报告'"
      top="10vh"
      :visible.sync="reportStatus"
      width="90%"
      :before-close="handleClose"
    >
      <report
        v-if="reportStatus"
        :JHLX="JHLX"
        @closeHandel="closeHandel"
        :Manipulation="Manipulation"
      />
    </el-dialog>
    <el-dialog
      :title="Manipulation.BDZMC+'信息总览'"
      :visible.sync="xxzlStatus"
      width="13rem"
      :before-close="handleClose"
      
    >
      <SubstationDetailsPopUp
        v-if="xxzlStatus"
        :Manipulation="Manipulation"
        @closexxzl="closexxzl"
        :JHLX="JHLX"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { JointInspectionModule } from "@/store/modules/JointInspection";
//loadsh
import lodash from "lodash";
import qs from 'qs'
import report from "../InspectionReport/report.vue";
import SubstationDetailsPopUp from "../InspectionReport/SubstationDetailsPopUp.vue";
@Component({
  components: { report, SubstationDetailsPopUp },
})
export default class Defects extends Vue {
  loading: boolean = true;
  // 所属地市
  // private localCity: string = "8a1ea5c64bdebad1014bdebc55c80162";
  // 缺陷柱状图数据
  private defectStatistics: any = {};
  //传图表得数据
  public xAxisData: any = ["已完成", "执行中"];

  public option: Object = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      left: "center",
      // right: "2%",
      // top: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      data: [],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      // name: "单位：个",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: (this as any).xAxisData[0],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data: [],
      },
      {
        name: (this as any).xAxisData[1],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FF8E1C",
              },
              {
                offset: 1,
                color: "#8E4B07",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data: [],
      },
    ],
  };

  // 点击柱图切换表格数据
  private clickEvent(v: any) {
    // console.log("vvvvvvvvvv:", v);
    if (v.name === "室内机器人巡视") {
      this.formData.xsfs = "0";
    } else if (v.name === "室外机器人巡视") {
      this.formData.xsfs = "1";
    } else if (v.name === "视频监控巡视") {
      this.formData.xsfs = "2";
    } else if (v.name === "环境监测巡视") {
      this.formData.xsfs = "3";
    } else if (v.name === "在线监测巡视") {
      this.formData.xsfs = "4";
    } else if (v.name === "视频巡视") {
      this.formData.xsfs = "5";
    }
    if (v.seriesName === "已完成") {
      this.formData.zxqk = "2";
    } else if (v.seriesName === "执行中") {
      this.formData.zxqk = "1";
    }
    this.formData.jhid = "";
    this.formData.xslx=''
    this.queryAuxRealtimeList();
  }

  // 更新option
  get newOption() {
    // console.log("this.defectStatistics:", this.defectStatistics);
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.defectStatistics;
    if (!robotInspection.yzx) {
      return option;
    }
    let yzxData = [
      robotInspection.yzx[0].NUMS,
      robotInspection.yzx[1].NUMS,
      robotInspection.yzx[2].NUMS,
      robotInspection.yzx[3].NUMS,
      robotInspection.yzx[4].NUMS,
      // robotInspection.yzx[5].NUMS,
    ];
    let zxzData = [
      robotInspection.zxz[0].NUMS,
      robotInspection.zxz[1].NUMS,
      robotInspection.zxz[2].NUMS,
      robotInspection.zxz[3].NUMS,
      robotInspection.zxz[4].NUMS,
      // robotInspection.zxz[5].NUMS,
    ];
    let xData = [
      // "室内机器人巡视",
      // "室外机器人巡视",
      // "视频监控巡视",
      // "环境监测巡视",
      // "在线监测巡视",
      // "视频巡视",
      robotInspection.zxz[0].XSFS,
      robotInspection.zxz[1].XSFS,
      robotInspection.zxz[2].XSFS,
      robotInspection.zxz[3].XSFS,
      robotInspection.zxz[4].XSFS,
    ];
    (option as any).series[0].data = yzxData;
    (option as any).series[1].data = zxzData;
    (option as any).xAxis.data = xData;
    return option;
  }

  // 返回按钮
  private goBack(val: string) {
    // let oldoldrouter = this.$route.query.oldoldrouter; //从inspection过了一遍的
    let oldrouter: any = this.$route.query.oldrouter; //task或者plan直接跳转过来的
    // this.$router.push({
    //   path: oldrouter,
    // });
    window.history.back();

  }

  //搜索框from表单数据
  formData: any = {
    company: "", // 所属单位
    substation: "", // 变电站
    jhid: "", // 计划id
    xsfs: "", // 巡视方式
    xjtime: [], // 巡检时间
    xslx: "", // 巡视类型
    zxqk: "", // 执行情况
  };
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  $refs!: {
    elForm: any;
  };

  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  // 巡检类型
  private xjlxList = [
    {
      code: "1",
      name: "例行巡检",
    },
    {
      code: "2",
      name: "自定义巡检",
    },
    {
      code: "3",
      name: "专项巡检",
    },
    {
      code: "4",
      name: "熄灯巡检",
    },
    {
      code: "5",
      name: "特殊巡检",
    },
  ];
  // 巡检方式
  private xjfsList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "0",
      name: "室内机器人",
    },
    {
      code: "1",
      name: "室外机器人",
    },
    {
      code: "2",
      name: "视频监控",
    },
    {
      code: "3",
      name: "环境监测",
    },
    {
      code: "4",
      name: "在线监测",
    },
    {
      code: "5",
      name: "高清视频",
    },
  ];
  // 计划状态
  private jhztList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "0",
      name: "未执行",
    },
    {
      code: "1",
      name: "执行中",
    },
    {
      code: "2",
      name: "已执行",
    },
    {
      code: "3",
      name: "执行失败",
    },
  ];

  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log(this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      company: "", // 所属单位
      substation: "", // 变电站
      jhid: "", // 计划id
      xsfs: "", // 巡视方式
      xjtime: [], // 巡检时间
      xslx: "", // 巡视类型
      zxqk: "", // 执行情况
    };
    this.queryAuxRealtimeList();
  }

  //table表格相关事件数据
  tableData = [
    // {
    //   BDZID: "100435539",
    //   BDZMC: "110kV商西变电站",
    //   ID: "100435539620201015220000",
    //   JHKSSJ: "2020-10-15 22:00:00",
    //   MID: "679685865-567bs-678bc-67969y89y89y98",
    //   NUM: 1,
    //   RWMC: "室外及电容器站用变等红外测温巡检任务",
    //   SSDSMC: "1国网济南供电公司",
    //   XSFS: "5",
    //   XSJSSJ: null,
    //   XSKSSJ: null,
    //   XSLX: "1",
    //   ZXQK: 2,
    // },
  ];
  get newTableData() {
    let tableData = [];

    if (this.tableData.length > 0) {
      tableData = this.tableData.map((v: any, i: any) => {
        if (v.XSLX === "") {
          v.XSLXMC = "全部";
        } else {
          let index = Number(v.XSLX) - 1;
          v.XSLXMC = this.xjlxList[index].name;
        }
        if (v.XSFS === "") {
          v.XSFSMC = "全部";
        } else {
          let index = Number(v.XSFS) + 1;
          v.XSFSMC = this.xjfsList[index].name;
        }
        if (v.ZXQK === "") {
          v.ZXQKMC = "全部";
        } else {
          let index = Number(v.ZXQK) + 1;
          v.ZXQKMC = this.jhztList[index].name;
        }
        return v;
      });
    }
    // console.log("tableData:",tableData);
    return tableData;
  }
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  verify(scope: any) {
    // console.log(scope.row);
  }
  //一行数据
  Manipulation: any = {};
  xxzlStatus = false;
  reportStatus = false;
  // 点击列表里的按钮
  JHLX = "";
  handleEdit(scope: any, type: string,jh) {
    this.Manipulation = scope.row;
    console.log(scope.row);

    if (type === "信息总览") {
      this.JHLX = "fjh";
      this.xxzlStatus = true;
      

    } else if (type === "报告") {
      this.JHLX = "fjh";
      this.reportStatus = true;

    } else {
      var querylist: any = {
        ID: scope.row.ID,
        XSFS: scope.row.XSFS,
        JHLX: scope.row.JHLX || null,
        XSLX: scope.row.XSLX,
      };
      this.routerpush(scope.row);
    }
  }
  handleClose() {
    this.xxzlStatus = false;
    this.reportStatus = false;
  }
  //关闭信息总览 弹框
  closeHandel() {
    this.xxzlStatus = false;
    this.queryAuxRealtimeList();
  }
  //关闭表格报告 弹框
  closexxzl() {
    this.reportStatus = false;
    this.queryAuxRealtimeList();
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }
  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    let form = {
      page: this.pages.page,
      rows: this.pages.pageSize,
      ssds: this.formData.company, // 所属地市
      bdzid: this.formData.substation, // 变电站
      jhid: this.formData.jhid || "", // 计划id
      xsfs: this.formData.xsfs, // 巡视方式
      xskssjpre: this.formData.xjtime == null ? "" : this.formData.xjtime[0], // 巡检开始时间
      xskssjpos: this.formData.xjtime == null ? "" : this.formData.xjtime[1], // 巡检结束时间
      xslx: this.formData.xslx, // 巡视类型
      zxqk: this.formData.zxqk, // 执行情况
    };
    (this as any).$services
      .subJhglDetail({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        if (result.data) {
          let page = this.pages.page;
      let size = this.pages.pageSize;
          this.tableData = result.data.rows.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
          this.pages.totalSize = result.data.total;
          if (result.data.total == 1 && this.$route.query.oldrouter == "task") {
            this.routerpush(result.data.rows[0]);
          }
          this.loading = false;
        }
      })
      .catch((err: object) => {
        this.loading = false;
        console.log(err);
      });
  }
  routerpush(data) {
    var oldoldrouter = this.$route.query.oldrouter;
    // const routeOne: any = this.$router.resolve({
    //   name: "inspectionmonitor",
    //   query: {
    //     bdzid: data.BDZID,
    //     queryId: data.ID, //当前列表里的ID
    //     xslx: this.formData.xslx,
    //     id: this.formData.jhid, //传进来的计划id
    //     xsfs: data.XSFS,
    //     oldoldrouter: oldoldrouter,
    //   },
    // });
    // console.log('routeOne.href:',routeOne.href);
    // window.open(routeOne.href, "_blank");
    let     query= {
        bdzid: data.BDZID,
        queryId: data.ID, //当前列表里的ID
        xslx: this.formData.xslx,
        id: this.formData.jhid, //传进来的计划id
        xsfs: data.XSFS,
        oldoldrouter: oldoldrouter,
      }
    let search=qs.stringify(query)
    let url=`/inspectionmonitor/#/jointInspection/inspectionmonitor?${search}`
    window.open(url, "_blank");
  }
  // 获取分计划柱状图数据
  private init() {
    (this as any).$services
      .subJhglChart({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        if (result.data) {
          this.defectStatistics = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 查询表格数据
    this.queryAuxRealtimeList();
  }

  mounted() {
    console.log((this as any).$route);

    this.formData.xslx = (this as any).$route.query.xslx;
    this.formData.jhid = (this as any).$route.query.id;
    // console.log(this.formData);

    this.init();
  }
}
</script>

<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 0.27rem;
  &-top {
    width: 100%;
    // height: 2%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }
  .head {
    width: 100%;
    height: 26%;
    padding-top: 1%;
    // background-color: grey;
    // margin-bottom: 0.29rem;
    .echa {
      width: 100%;
      height: 100%;
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
  }
  .center {
    width: 100%;
    height: 70%;
    padding-top: 1%;
    // background-color: pink;
    // margin-bottom: 0.38rem;
    .inspection-report-h {
      width: 100%;
      height: 100%;
      // padding: 0.24rem;
      .inspection-report-index {
        width: 100%;
        height: 100%;
        &-btn {
          display: flex;
          justify-content: flex-end;
        }
        .fromed {
          height: 120px;
        }
        .tableed {
          height: calc(100% - 180px);
        }
        .paged {
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .iconfont {
        cursor: pointer;
      }
    }
  }
  .bottom {
    width: 100%;
    // height: 56%;
    // background-color: rgb(179, 245, 177);
  }
}
</style>

<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
</style>
